<template>
  <div>
    <table width="800" style="text-align: center; margin: 0 auto" border="1">
      <caption>
        欢迎光临_vue开发的收银系统_水果店
      </caption>
      <tr>
        <td>
          <b>苹果{{ price }}¥/斤,折扣{{ zheshu }}折</b>
        </td>
      </tr>
      <tr>
        <td>
          <span>请输入你想购买的斤数：</span>
          <input type="number" v-model="count" />
        </td>
      </tr>
      <tr>
        <td>
          <input type="button" value="结账买单~" @click="add" />
        </td>
      </tr>
      <tr>
        <td>
          <span>结账单：总价：{{ addPrice }}￥元</span>
          <span>折后价：{{ dazhe }}元</span>
          <span>省了：{{ save }}元</span>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      price: 10,
      zheshu: 8,
      addPrices: 0,
      dazhe: 0,
      save: 0,
    };
  },
  methods: {
    add() {
      this.addPrice = this.price * this.count;
      this.dazhe = ((this.price * this.zheshu) / 10) * this.count;
      this.save = this.addPrices - this.dazhe;
    },
  },
};
</script>

<style>
</style>